<template>
  <div>
    <router-view>
      <div v-if="stated">
        <div style="display: flex; align-items: center; justify-content: space-between">
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </div>
        <div style="height: 2vh"></div>
        <el-card class="box-card">
          <template #header>
            <div style="font-size: 20px; font-weight: 600">
              <span>住院订单</span>
            </div>
            <div style="height: 2vh"></div>
            <div style="display: flex; align-items: center">
              <div class="block" style="display: flex; align-items: center">
                <div>入院时间：</div>
                <div style="width: 15px"></div>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="To"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :size="size"
                  @change="sarend"
                />
              </div>
              <div style="width: 15px"></div>
              <!-- <el-select v-model="value" class="m-2" placeholder="科室选择" @change="kssearch" clearable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
              <div style="width: 15px"></div>
              <!-- <div style="display: flex; align-items: center">
                <el-input v-model="input" placeholder="输入医生名称" clearable style="width: 250px" @input="docsearch" />
              </div> -->
              <div style="display: flex; align-items: center">
                <el-input
                  v-model="huanz"
                  placeholder="输入患者名称"
                  clearable
                  style="width: 250px"
                  @input="hzsearch"
                />
                <div style="width: 8px"></div>
              </div>
            </div>
          </template>
          <div>
            <el-table
              ref="multipleTableRef"
              style="width: 100%"
              stripe
              @selection-change="handleSelectionChange"
              :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)"
              v-loading="loading"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" property="id" width="60" align="center" fixed />
              <el-table-column
                label="患者姓名"
                property="user.nickname"
                width="150"
                align="center"
                fixed
              />
              <el-table-column property="card" label="就诊卡号" width="150" align="center" />
              <el-table-column
                property="user.tel"
                label="手机号"
                show-overflow-tooltip
                width="140"
                align="center"
              />
              <!-- <el-table-column property="doctor_name" label="医生名称" show-overflow-tooltip width="180" align="center" /> -->
              <el-table-column
                property="depart.name"
                label="挂号科室"
                show-overflow-tooltip
                width="150"
                align="center"
              />
              <el-table-column
                property="money"
                label="支付金额"
                show-overflow-tooltip
                width="150"
                align="center"
              />
              <el-table-column
                property="report_status"
                label="住院状态"
                show-overflow-tooltip
                width="150"
                align="center"
              >
                <template #default="scope">
                  <span v-if="scope.row.report_status === 1" style="color: red"
                    ><el-tag class="ml-2" type="success">住院中</el-tag></span
                  >
                  <span v-if="scope.row.report_status === 2" style="color: rgb(29, 245, 21)"
                    ><el-tag class="ml-2" type="danger">已出院</el-tag></span
                  >
                </template>
              </el-table-column>
              <el-table-column
                property="status"
                label="缴费状态"
                show-overflow-tooltip
                width="150"
                align="center"
              >
                <template #default="scope">
                  <span v-if="scope.row.status === 1" style="color: rgb(29, 245, 21)"
                    ><el-tag class="ml-2" type="success">已支付</el-tag></span
                  >
                  <span v-if="scope.row.status === 2" style="color: red"
                    ><el-tag class="ml-2" type="danger">未支付</el-tag></span
                  >
                </template>
              </el-table-column>
              <el-table-column
                property="order_code"
                label="订单号"
                show-overflow-tooltip
                width="250"
                align="center"
              />
              <el-table-column
                property="create_time"
                label="入院时间"
                show-overflow-tooltip
                width="200"
                align="center"
              />
              <el-table-column
                property="leave_time"
                label="出院时间"
                show-overflow-tooltip
                width="200"
                align="center"
              />

              <el-table-column fixed="right" label="操作" width="140" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center; justify-content: center">
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="targets(scope.row.id, scope.row)"
                      >详情</el-button
                    >
                    <!-- <el-button v-if="scope.row.status == 3 || scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6"
                      type="danger" plain size="small" :disabled="false" @click="dels(scope.row.id)">删除</el-button> -->
                    <el-button
                      type="danger"
                      plain
                      size="small"
                      :disabled="scope.row.report_status == 1"
                      @click="dels(scope.row.id)"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="height: 1vh"></div>
            <div style="display: flex; justify-content: center">
              <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[10, 20, 50, 100]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
              />
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="defaults">
        <div style="display: flex; align-items: center; justify-content: space-between">
          <div class="top_navigate">
            <el-button type="primary" :icon="ArrowLeftBold" @click="returned">返回</el-button>
          </div>
          <div>&nbsp;</div>
        </div>
        <div style="height: 2vh"></div>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>患者信息</span>
            </div>
          </template>
          <div v-if="outpatientxq">
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">患者姓名</div>
                <div>{{ outpatientxq.user.nickname }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">证件类型</div>
                <div>身份证</div>
              </div>
              <!-- <div class="user_inp">
                <div style="width: 120px; color: #afafaf">医生姓名</div>
                <div>{{ outpatientxq.doctor_name }}</div>
              </div> -->
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">账户头像</div>
                <!-- <div>
                <img :src="outpatientxq.user.avatar" alt="" style="width: 75px; height: 75px; border-radius: 180%;"
                  @click="previewImage">
                <div v-if="showPreview" class="preview-container" @click="closePreview">
                  <img :src="outpatientxq.user.avatar" alt="" class="preview-image">
                </div>
              </div> -->
                <el-image
                  :src="outpatientxq.user.avatar"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[outpatientxq.user.avatar]"
                  fit="cover"
                  preview-teleported="true"
                  style="width: 75px; height: 75px; border-radius: 180%"
                />
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">手机号</div>
                <div>{{ outpatientxq.user.tel }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">证件号码</div>
                <div>{{ outpatientxq.user.code }}</div>
              </div>
              <div class="user_inp" style="visibility: hidden">
                <div style="width: 120px; color: #afafaf">患者头像</div>
                <div>张三</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">就诊人地址</div>
                <div>{{ outpatientxq.user.address }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">住院时间</div>
                <div>{{ outpatientxq.create_time }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">关系</div>
                <div>{{ outpatientxq.user.relationship }}</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">性别</div>
                <div v-if="outpatientxq.user.sex == 1">男</div>
                <div v-else-if="outpatientxq.user.sex == 2">女</div>
              </div>

              <div class="user_inp" style="visibility: hidden">
                <div style="width: 120px; color: #afafaf">患者头像</div>
                <div>张三</div>
              </div>
            </div>
          </div>
        </el-card>
        <div style="height: 2vh"></div>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>费用明细</span>
            </div>
          </template>
          <!-- <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 20px;
            "
          > -->
          <!-- <el-button
              type="primary"
              @click="add"
              :disabled="outpatientxq.visit_status == 1 ? true : false"
              >新增服务</el-button
            >
            <el-button
              type="success"
              @click="yes"
              :disabled="outpatientxq.visit_status == 1 ? true : false"
              >就诊完成</el-button
            > -->
          <!-- </div> -->
          <div style="width: 100%">
            <el-table
              ref="multipleTableRef"
              style="width: 100%"
              stripe
              border
              size="large"
              :data="zhangdetailed.slice((currentPage5 - 1) * pageSize5, currentPage5 * pageSize5)"
              v-loading="loadings"
            >
              <el-table-column label="序号" property="id" width="120" align="center" />
              <el-table-column property="name" label="服务名称" width="200" align="center" />
              <el-table-column label="服务类型" property="type" width="140" align="center">
                <template #default="scope">
                  {{ scope.row.type === 1 ? '药品' : scope.row.type === 2 ? '体检' : '住院费' }}
                </template>
              </el-table-column>
              <el-table-column
                property="price"
                label="单价(元)"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                property="number"
                label="规格"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                property="money"
                label="小计(元)"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column label="订单状态" show-overflow-tooltip align="center">
                <template #default="scope">
                  <span v-if="scope.row.status === 1" style="color: rgb(43, 207, 43)"
                    ><el-tag class="ml-2" type="success">已支付</el-tag></span
                  >
                  <span v-else-if="scope.row.status === 2" style="color: red"
                    ><el-tag class="ml-2" type="danger">未支付</el-tag></span
                  >
                </template>
              </el-table-column>
              <el-table-column property="create_time" label="支付时间" width="200" align="center" />
              <!-- <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center; justify-content: center">
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="centerDialogVisible(scope.row.id, scope.row)"
                      >编辑</el-button
                    >
                    <el-button type="danger" plain size="small" @click="clocks(scope.row.id)"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column> -->
            </el-table>
            <div style="height: 1vh"></div>
            <div style="display: flex; justify-content: center">
              <el-pagination
                v-model:current-page="currentPage5"
                v-model:page-size="pageSize5"
                :page-sizes="[10, 20, 50, 100]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="zhangdetailed.length"
              />
            </div>
          </div>
        </el-card>
        <div style="height: 2vh"></div>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>订单信息</span>
            </div>
          </template>
          <div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">订单总额</div>
                <div>{{ rowsed.money }}&nbsp;(单位：元)</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">支付方式</div>
                <div>微信支付</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">支付时间</div>
                <div>{{ rowsed.yes_time }}</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">订单状态</div>
                <div v-if="rowsed.status === 1" style="color: rgb(43, 207, 43)"
                  ><el-tag class="ml-2" type="success">已支付</el-tag></div
                >
                <div v-else-if="rowsed.status === 2" style="color: red"
                  ><el-tag class="ml-2" type="danger">未支付</el-tag>
                </div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf">订单编号</div>
                <div>{{ rowsed.order_code }}</div>
              </div>
              <div class="user_inp" style="visibility: hidden">
                <div style="width: 120px; color: #afafaf">患者头像</div>
                <div>张三</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </router-view>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { Bslu, Yanxq, Yanming, Zydel } from '@/api/user';
  import table2excel from 'js-table2excel';

  // const tableData = ref([])
  const datesearch = ref([]);
  const huanz = ref('');
  const loading = ref(true);
  const currentPage4 = ref(1);
  const currentPage5 = ref(1);
  const pageSize5 = ref(5);
  const loadings = ref(false);
  const pageSize4 = ref(10);
  const stated = ref(true);
  const defaults = ref(false);
  const outpatientxq = ref();
  const tableData = ref([]);
  const formattedDates = ref([]);
  const value1 = ref('');
  const zhangdetailed = ref([]);
  payment();
  function payment() {
    Bslu().then((res) => {
      console.log(res);
      tableData.value = res.data;
      datesearch.value = res.data;
      loading.value = false;
    });
  }
  function targets(id, row) {
    defaults.value = true;
    stated.value = false;
    Yanxq({
      id: id,
    }).then((res) => {
      console.log(res.data);
      outpatientxq.value = res.data;
    });
    Yanming({
      report_id: id,
    })
      .then((res) => {
        console.log(res.data);
        zhangdetailed.value = res.data;
      })
      .catch((res) => {
        zhangdetailed.value = [];
      });
  }
  function returned() {
    defaults.value = false;
    stated.value = true;
  }
  function dels(delid) {
    ElMessageBox.confirm('是否删除信息?', '删除', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then((action) => {
      if (action === 'confirm') {
        console.log(12);
        Zydel({
          id: delid,
        }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            });
            payment();
          } else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            });
          }
        });
      } else {
        ElMessage({
          type: 'info',
          message: '取消操作',
        });
      }
    });
  }

  const column = [
    {
      title: '序号',
      key: 'id',
      type: 'text',
    },
    {
      title: '患者姓名',
      key: 'user.nickname',
      type: 'text',
    },
    {
      title: '就诊卡号',
      key: 'card',
      type: 'text',
    },
    {
      title: '手机号',
      key: 'user.tel',
      type: 'text',
    },
    {
      title: '挂号科室',
      key: 'depart.name',
      type: 'text',
    },
    {
      title: '支付金额',
      key: 'money',
      type: 'text',
    },
    {
      title: '住院状态',
      key: 'report_status',
      type: 'text',
    },
    {
      title: '缴费状态',
      key: 'status',
      type: 'text',
    },
    {
      title: '订单号',
      key: 'order_code',
      type: 'text',
    },
    {
      title: '入院时间',
      key: 'create_time',
      type: 'text',
    },
    {
      title: '出院时间',
      key: 'leave_time',
      type: 'text',
    },
  ];

  const choice = ref([]);
  // 多选
  const handleSelectionChange = (val) => {
    console.log(val);
    choice.value = val;
  };

  function exportExcel() {
    let date_choie = [];
    if (choice.value.length == 0) {
      console.log(123);
      date_choie = tableData.value;
    } else {
      console.log(3333);
      date_choie = choice.value;
    }
    const newData = date_choie.map((item) => ({
      ...item,
      'user.tel': item.user.tel,
      'depart.name': item.depart.name,
      'user.nickname': item.user.nickname,
      'status': item.status == 1 ? '已支付' : '未支付',
      'report_status': item.report_status == 1 ? '住院中' : '已出院',
      // 'type': '微信支付'
    }));
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const hours = String(currentDate.getHours()).padStart(2, '0');
    const minutes = String(currentDate.getMinutes()).padStart(2, '0');
    const seconds = String(currentDate.getSeconds()).padStart(2, '0');

    const formattedDate = `${year}-${month}-${day}  ${hours}:${minutes}:${seconds}`;

    const fileName = `住院缴费记录_${formattedDate}.xlsx`; // 在文件名中附带当前时间的年月日时分秒

    table2excel(column, newData, fileName); // 导出excel
  }

  const sarend = () => {
    formattedDates.value = [];
    if (formattedDates.value.length == 0) {
      tableData.value = datesearch.value;
    }
    value1.value.forEach((date) => {
      let inputDate = new Date(date);
      let year = inputDate.getFullYear();
      let month = inputDate.getMonth() + 1;
      let day = inputDate.getDate();
      let formattedDate =
        year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
      formattedDates.value.push(formattedDate);
    });
    let startTimestamp = new Date(formattedDates.value[0]).getTime();
    let endTimestamp = new Date(formattedDates.value[1]).getTime();
    let result = datesearch.value.filter((item) => {
      let itemTimestamp = new Date(item.create_time).getTime();
      return itemTimestamp >= startTimestamp && itemTimestamp <= endTimestamp;
    });
    if (huanz.value && huanz.value.trim() !== '') {
      result = result.filter((item) => {
        return item.user.nickname.includes(huanz.value);
      });
    }
    tableData.value = result;
  };

  function hzsearch() {
    console.log(huanz.value);
    if (huanz.value == '') {
      sarend();
    }
    let doctor = [];
    let searchData = formattedDates.value.length != 0 ? tableData.value : datesearch.value;
    if (huanz.value != '' || huanz.value != undefined) {
      const doctorData = searchData.filter((depart) => depart.user.nickname.includes(huanz.value));
      console.log(doctorData);
      doctor.push(...doctorData);
      // sarend();
      tableData.value = doctor;
    }
  }
</script>
<style scoped>
  .top_navigate {
    display: flex;
    align-items: center;
  }

  .blue_ycy {
    width: 32px;
    height: 8px;
    background-color: #006eff;
    border-radius: 20px;
    margin-right: 10px;
  }

  .font_size {
    font-size: 20px;
  }

  .m-2 {
    width: 120px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #006eff;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 100%;
  }

  .user_inp {
    width: 33.33%;
    display: flex;
    align-items: center;
  }

  .arrow {
    width: 96%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 3%;
    height: 7vh;
  }
</style>
